<template>
  <div id="app">
    <tab-bar>
      <!--
       tab-bar是菜单栏组件,使用一次就会替换全部slot
       每个插槽都可以动态绑定 图片与文字
       active-color是动态绑定的 可以自己传值

       为什么使用三次TabBarItem组件,因为每个组件都是独立的,使用几个就会渲染出几个按钮
       又因为每个菜单栏按钮不一样,所以需要使用具名插槽来实现
      -->
      <!--  这里的path(是属性)和active-color(属性) 对应props里面 的属性   -->
      <!-- :path="这里写什么都是变量名" 不写:就是字符串     -->
      <TabBarItem path="/home" active-color="blue">
        <img slot="item-icon-active" src="./assets/img/tab-bar/首页a.png">
        <img slot="item-icon" src="./assets/img/tab-bar/首页.png" alt="">
        <!-- 使图片与文字分行  div是独占一行的-->
        <div slot="item-text"> 首页</div>
      </TabBarItem>

      <TabBarItem path="/category">
        <img slot="item-icon-active" src="./assets/img/tab-bar/分类ac.png">
        <img slot="item-icon" src="./assets/img/tab-bar/分类.png" alt="">
        <!-- 使图片与文字分行  div是独占一行的-->
        <div slot="item-text"> 分类</div>
      </TabBarItem>

      <TabBarItem path="/shop">
        <img slot="item-icon-active" src="./assets/img/tab-bar/购物车ac.png">
        <img slot="item-icon" src="./assets/img/tab-bar/购物车.png" alt="">
        <div slot="item-text"> 购物车</div>
      </TabBarItem>

      <TabBarItem path="/profile">
        <img slot="item-icon-active" src="./assets/img/tab-bar/我的.png">
        <img slot="item-icon" src="./assets/img/tab-bar/我的ac.png" alt="">
        <div slot="item-text"> 我的</div>
      </TabBarItem>

    </tab-bar>
    <router-view></router-view>
<!--    <router-view></router-view>-->
<!--    <TabBar></TabBar>-->
  </div>
</template>

<script>
  import TabBar from './components/tab-bar/tab-bar'
  import TabBarItem from './components/tab-bar/tab-bar-item'
export default {
  name: 'App',
  data(){
    return{
     /* home:"/home",
      blue:"blue"*/
    }
  },
  components:{
    TabBar,
    TabBarItem
  }
}
</script>
<!--固定在style引入CSS的方法-->
<style>
@import "./assets/css/base.css";

</style>
